<template>
  <div class="upload">
    <div class="upload-left">
      <div style="width: 100%; height: 100%; position: relative">
        <el-upload
          v-model="fileList"
          :file-list="fileList"
          :before-upload="handleBeforeUpload"
          :on-change="handleChange"
          :http-request="handleRequest"
          style="opacity: 0.5; height: 300px; position: relative"
          drag
          accept="xls,.xlsx"
        >
          <div class="upload-content">
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
              <el-button type="primary" size="medium">
                <SvgIcon class="excelIcon" icon="excelIcon" />
                <b>点击上传</b>
              </el-button>
            </div>
          </div>

          <template #tip>
            <div
              class="el-upload__tip"
              style="
                color: black;
                font-size: 14px;
                position: absolute;
                top: 70%;
                width: 100%;
                text-align: center;
              "
            >
              只能上传Excel类型的文件(xls或xlsx)
            </div>
          </template>
        </el-upload>
        <dv-loading
          v-if="loading"
          style="
            background: rgba(0, 0, 0, 0.5);
            position: absolute;
            top: 0%;
            left: 0%;
          "
        >
          <div color-white>Loading...</div>
        </dv-loading>
      </div>

      <el-progress :percentage="progressPercent" style="margin-top: 50px" />
      <h2>
        <div>已上传成功的文件</div>
        <dv-decoration6 style="width: 300px; height: 30px" />
      </h2>
      <div class="upload-left-top">
        <div
          class="success-excel"
          v-for="(item, index) in successFile"
          :key="index"
          @click="btnClickFile(item.file_name)"
        >
          <div>
            <el-radio-group v-model="radio1" class="ml-4">
              <el-radio :value="item.file_name" size="large">
                <SvgIcon class="result" icon="excel" />
                <span>{{ item.file_name }}</span>
              </el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>

      <Carousel></Carousel>
    </div>
    <div class="upload-right">
      <!-- 左侧点击文件名的时候请求接口展示 -->
      <el-empty
        style="margin-top: 30%; color: red !important"
        v-if="tableData.length === 0"
        description="No Data"
      ></el-empty>
      <div class="upload-right-bottom" v-else>
        <el-table
          :data="tableData"
          style="width: 100%"
          height="90vh"
          :row-class-name="tableRowClassName"
        >
          <el-table-column prop="user_id" label="户号" />
          <el-table-column prop="user_day" label="日期" />
          <el-table-column prop="user_time" label="时间" />
          <el-table-column prop="user_volt" label="电压" />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { UploadFilled } from "@element-plus/icons-vue";
import Carousel from "./Carousel.vue";
import axios from "axios";
import { onMounted, ref } from "vue";
import { postFile, postUserInfo } from "@/api/api";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
const store = useStore();
const fileList = ref([]);
const progressPercent = ref(0);
const loading = ref(false);
const successFile = ref([
  {
    file_name: "文件一",
  },
  {
    file_name: "文件二",
  },
  {
    file_name: "文件三",
  },
  {
    file_name: "文件四",
  },
  {
    file_name: "文件五",
  },
  {
    file_name: "文件六",
  },
]);
const router = useRouter();
const tableData = ref([]);
const radio1 = ref("");
const tableRowClassName = (rowIndex) => {
  if (rowIndex.rowIndex % 2 != 0) {
    console.log("rowIndex", rowIndex.rowIndex);
    return "evenRow";
  }
  return "oddRow";
};
// 上传之前
const handleBeforeUpload = (file) => {};
const handleRequest = (file) => {
  loading.value = true;
  let formData = new FormData();
  formData.append("file", file.file);
  let url = "http://127.0.0.1:8000/app/upload_file"; //访问后端接口的url
  let method = "post";
  let timer = null;
  timer = setInterval(() => {
    progressPercent.value += 3;
    if (progressPercent.value >= 99) {
      clearInterval(timer);
    }
  }, 1000);

  axios({
    method,
    url,
    data: formData,
    timeout: 60 * 1000,
    headers: { "Content-Type": "multipart/form-data" },
  }).then((res) => {
    progressPercent.value = 100;
    clearInterval(timer);
    ElMessage.success("上传成功");
    loading.value = false;
    // 上传成功后调用initFileList事件
    initFileList();
  });
};
const handleChange = (file) => {};
const initFileList = async () => {
  const res = await postFile();
  successFile.value = res.data;
  progressPercent.value = 0;
  // 右侧的数据默认最后一个
  btnClickFile(successFile.value[successFile.value.length - 1].file_name);
  // 默认选中最后一个
  radio1.value = successFile.value[successFile.value.length - 1].file_name;
};

// 点击文件请求右侧的列表数据
const btnClickFile = async (val) => {
  // 向仓库添加全局数据
  store.commit("addFileName", val);
  const res = await postUserInfo({ file_name: val });
  tableData.value = res.userinfo_data;
};
const btnClickGoResult = (val) => {
  if (!val) {
    ElMessage.error("请先选择文件");
    return;
  }
  router.push({
    path: "/result",
    query: { file_name: val },
  });
};
const btnClickGoUser = (val) => {
  if (!val) {
    ElMessage.error("请先选择文件");
    return;
  }
  router.push({
    path: "/user",
    query: { file_name: val },
  });
};
const btnClickGoPhase = (val) => {
  if (!val) {
    ElMessage.error("请先选择文件");
    return;
  }
  router.push({
    path: "/phase",
    query: { file_name: val },
  });
};
onMounted(() => {
  initFileList();
});
</script>
<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
.evenRow {
  background: rgb(245, 245, 245) !important;
}
.oddRow {
  background: rgb(251, 255, 242) !important;
}
</style>
<style lang="scss" scoped>
.el-table-row:nth-child(even) {
  background-color: red !important;
}
::v-deep .el-upload-list .el-upload-list--text {
  display: none !important;
  color: white;
}
.upload {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .upload-left {
    width: 40%;
    .el-progress {
      ::v-deep .el-progress-bar__outer {
        height: 16px !important;
      }
      ::v-deep .el-progress__text {
        font-size: 16px !important;
      }
    }
    h2 {
      display: flex;
      margin: 10px 0;
    }
    ::v-deep .el-upload {
      height: 300px !important;
      .el-upload-dragger {
        height: 300px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        .excelIcon {
          font-size: 50px;
          margin-right: 10px;
        }
      }
    }
    .el-progress {
      color: white;
      margin: 26px 0;
      ::v-deep .el-progress__text {
        color: red;
      }
    }
    .upload-left-top {
      // min-height: 30%;
      background: white;
      opacity: 0.9;
      border-radius: 10px;
      padding: 20px 0;
      display: flex;
      flex-wrap: wrap;
      flex-shrink: 0;
      margin-bottom: 30px;
      .success-excel {
        width: 30%;
        padding: 4px 0;
        height: 30px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        vertical-align: middle;
        > div {
          width: 20%;
        }
        span {
          margin-left: 4px;
          font-size: 16px;
          font-weight: bold;
        }
      }
    }
  }
  .upload-right {
    width: 54%;
    height: 100%;
    border-radius: 40px;
    border: 2px dashed gainsboro;
    padding: 10px;
    background: white;
    opacity: 0.9;

    .upload-right-bottom {
      opacity: 0.9;
      height: 60%;
      margin-top: 10px;
    }
  }
}
</style>
